
import React from 'react'
import {Modal,Alert,Form,Transfer,Message} from 'antd'
import Store from "./Store";
import {observer} from 'mobx-react'
import {CloudAssignment} from "../../../api/system/role/RoleApi";

@observer
class CloudPermissionForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        Store.hasCloud = [];
        Store.allCloud = [];
        Store.initCloudPermission();
    }

    handleSubmit = () => {
        console.log(Store.hasCloud);
        CloudAssignment({id:Store.record.id,clouds:JSON.stringify(Store.hasCloud)}).then(response => {
            if (response.data.code === 200){
                Message.success(response.data.msg);
                Store.record = {};
                Store.hasCloud = [];
                Store.cloudPermissionVisible = false;
            }
        })
    };

    render() {
        return (
            <Modal
                visible
                width={800}
                maskClosable={true}
                title="分配角色"
                onCancel={() => Store.cloudPermissionVisible = false}
                confirmLoading={this.state.loading}
                onOk={this.handleSubmit}>
                <Alert
                    closable
                    showIcon
                    type="info"
                    message="小提示"
                    style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
                    description="为用户配置对应云图权限，只有拥有相应的云图权限才能访问云图"/>
                <Form.Item label="为用户分配云图权限" style={{padding: '0 20px'}}>
                    <Transfer
                        showSearch
                        listStyle={{width: 325, maxHeight: 500, minHeight: 300}}
                        titles={['未拥有的云图权限', '已拥有的云图权限']}
                        dataSource={Store.allCloud}
                        targetKeys={Store.hasCloud}
                        onChange={keys => Store.hasCloud = keys}
                        render={item => `${item.key}`}/>
                </Form.Item>
            </Modal>
        );
    }
}

export default CloudPermissionForm;
